<script setup lang="ts">

import { ref } from 'vue'
import type { Ref } from 'vue'

const tel: Ref<string> = ref('12345678912')
const name: Ref<string> = ref('张阿森纳')

</script>
<template>
    <div class="bigbox">
        <div class="box">
            <div class="header">
                <van-nav-bar title="物流信息" left-arrow :border="false" @click-left="$router.back()" />
            </div>
            <div class="shunfeng">
                <div class="left">
                    <p>顺丰速运</p>
                    <p>SF12321413413252135</p>
                </div>
                <div class="right">
                    <button>复制</button>
                </div>
            </div>
        </div>

        <div class="jindu">
            <van-steps direction="vertical" :active="0">
                <van-step>
                    <h3>【广州】正在派送</h3>
                    <p>2022-07-14 12:40</p>
                </van-step>
                <van-step>
                    <h3>【哈尔滨】正在运送</h3>
                    <p>2022-07-13 10:00</p>
                </van-step>
                <van-step>
                    <h3>快件已发货</h3>
                    <p>2022-07-10 09:30</p>
                </van-step>
            </van-steps>
        </div>
        <div class="love">
            <van-icon name="like" color="red" />
            <h3>猜你喜欢</h3>
        </div>
        <div>
            <LikeList></LikeList>

        </div>
    </div>
</template>
<style lang="scss" scoped>
.bigbox {
    background-color: #efeeee;
}

.box {
    width: 100%;
    height: 2rem;
    background-color: #ade0e5;
    position: relative;
}

.box .shunfeng {
    box-sizing: border-box;
    padding: 0.1rem 0.2rem;
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 37%;
    border-radius: 0.13rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    background-color: white;

}

.left p:first-of-type {
    font-size: 0.16rem;
}

.right button {
    border-radius: 0.15rem;
    background-color: white;
    border: 1px solid #e9e9eb;
    padding: 0.05rem 0.08rem;
    color: #737375;
    margin-top: 0.26rem;
}

.jindu {
    /* background-color: #ade0e5; */
    /* position: relative; */
}

.jindu .van-steps {
    border-radius: 0.15rem;
    width: 80%;
    margin-left: 6%;
    position: absolute;
    top: 28%;


}


.love {
    display: flex;
    /* justify-content: space-evenly; */
    height: 0.4rem;
    padding-left: 1.5rem;
    margin-top: 3rem;
}

.love .van-icon {
    line-height: 0.4rem;
    margin-right: 0.15rem;
    margin-top: 0.02rem;
}

.love h3 {
    font-weight: 600;


}
</style>